<template>
  <el-form
    :model="formData"
    ref="vForm"
    :rules="rules"
    label-position="left"
    label-width="100px"
    size="default"
    @submit.prevent
  >
    <div class="tab-container">
      <el-tabs v-model="TABActiveTab" type="border-card">
        <el-tab-pane name="tab1" label="个人信息操作">
          <div class="card-container">
            <el-card
              style="
                 {
                  width: 100% !important;
                  background: #fafafa;
                }
              "
              shadow="never"
            >
              <template #header>
                <div class="clear-fix">
                  <h2>个人信息</h2>
                  <i class="float-right el-icon-arrow-down"></i>
                </div>
              </template>
              <el-form-item
                label=""
                label-width="0"
                prop="IMG"
                class="label-center-align"
              >
                <el-upload
                  :file-list="IMGFileList"
                  :headers="IMGUploadHeaders"
                  :data="IMGUploadData"
                  list-type="picture-card"
                  show-file-list
                  :limit="1"
                >
                  <template #default><i class="el-icon-plus"></i></template
                ></el-upload>
              </el-form-item>
              <el-row>
                <el-col :span="12" class="grid-cell">
                  <el-form-item
                    label="姓名"
                    prop="NAME"
                    class="label-center-align"
                  >
                    <el-input
                      v-model="formData.NAME"
                      type="text"
                      clearable
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="grid-cell">
                  <el-form-item
                    label="性别"
                    prop="SEX"
                    class="label-center-align"
                  >
                    <el-select
                      v-model="formData.SEX"
                      class="full-width-input"
                      clearable
                    >
                      <el-option
                        v-for="(item, index) in SEXOptions"
                        :key="index"
                        :label="item.value"
                        :value="item.value"
                        :disabled="item.disabled"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12" class="grid-cell">
                  <el-form-item
                    label="邮箱"
                    prop="EMAIL"
                    class="label-center-align"
                  >
                    <el-input
                      v-model="formData.EMAIL"
                      type="text"
                      clearable
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="grid-cell">
                  <el-form-item
                    label="电话"
                    prop="PHONE"
                    class="label-center-align"
                  >
                    <el-input
                      v-model="formData.PHONE"
                      type="text"
                      clearable
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12" class="grid-cell">
                  <el-form-item
                    label="生日"
                    prop="BUTHDAY"
                    class="label-center-align"
                  >
                    <el-date-picker
                      v-model="formData.BUTHDAY"
                      type="date"
                      class="full-width-input"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                      clearable
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="grid-cell">
                  <el-form-item
                    label="工作开始日期"
                    prop="WORK_START_DATE"
                    class="label-center-align"
                  >
                    <el-date-picker
                      v-model="formData.WORK_START_DATE"
                      type="date"
                      class="full-width-input"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                      clearable
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12" class="grid-cell">
                  <el-form-item
                    label="期望职位"
                    prop="POSITION"
                    class="label-center-align"
                  >
                    <el-input
                      v-model="formData.POSITION"
                      type="text"
                      clearable
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="grid-cell">
                  <el-form-item
                    label="期望薪资"
                    prop="SALARY"
                    class="label-center-align"
                  >
                    <el-input
                      v-model="formData.SALARY"
                      type="text"
                      clearable
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-card>
          </div>
          <div class="card-container">
            <el-card
              style="
                 {
                  width: 100% !important;
                  background: #fafafa;
                }
              "
              shadow="never"
            >
              <template #header>
                <div class="clear-fix">
                  <span>教育经历</span>
                  <i class="float-right el-icon-arrow-down"></i>
                </div>
              </template>
              <el-row>
                <el-col :span="12" class="grid-cell">
                  <el-form-item
                    label="学校名称"
                    prop="SCHOOL"
                    class="label-center-align"
                  >
                    <el-input
                      v-model="formData.SCHOOL"
                      type="text"
                      clearable
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="grid-cell">
                  <el-form-item
                    label="专业"
                    prop="PROFESSION"
                    class="label-center-align"
                  >
                    <el-input
                      v-model="formData.PROFESSION"
                      type="text"
                      clearable
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12" class="grid-cell">
                  <el-form-item
                    label="学历"
                    prop="EDUCATION"
                    class="label-center-align"
                  >
                    <el-radio-group v-model="formData.EDUCATION">
                      <el-radio
                        v-for="(item, index) in EDUCATIONOptions"
                        :key="index"
                        :label="item.value"
                        :disabled="item.disabled"
                        style="
                           {
                            display: inline;
                          }
                        "
                        >{{ item.label }}</el-radio
                      >
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="grid-cell">
                  <el-form-item
                    label="时间段"
                    prop="SCHOOL_TIME"
                    class="label-center-align"
                  >
                    <el-date-picker
                      is-range
                      v-model="formData.SCHOOL_TIME"
                      type="daterange"
                      class="full-width-input"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                      clearable
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item
                label="在校经历"
                prop="SCHOOL_SKILL"
                class="label-center-align"
              >
                <el-input
                  type="textarea"
                  v-model="formData.SCHOOL_SKILL"
                  rows="3"
                ></el-input>
              </el-form-item>
              <el-row>
                <el-col :span="24" class="grid-cell">
                  <div class="static-content-item">
                    <el-button type="primary">保存</el-button>
                  </div>
                </el-col>
              </el-row>
            </el-card>
          </div>
        </el-tab-pane>
        <el-tab-pane name="tab-pane-90623" label="个人信息预览"> </el-tab-pane>
      </el-tabs>
    </div>
  </el-form>
</template>

<script>
import { defineComponent, toRefs, reactive, getCurrentInstance } from "vue";
export default defineComponent({
  components: {},
  props: {},
  setup() {
    const state = reactive({
      formData: {
        IMG: null,
        NAME: "",
        SEX: "男",
        EMAIL: "",
        PHONE: "",
        BUTHDAY: null,
        WORK_START_DATE: null,
        POSITION: "",
        SALARY: "",
        SCHOOL: "",
        PROFESSION: "",
        EDUCATION: 1,
        SCHOOL_TIME: null,
        SCHOOL_SKILL: "",
      },
      rules: {},
      SEXOptions: [
        {
          label: "男",
          value: "男",
        },
        {
          label: "女",
          value: "女",
        },
      ],
      EDUCATIONOptions: [
        {
          label: "本科",
          value: 1,
        },
        {
          label: "硕士",
          value: 2,
        },
      ],
      IMGFileList: [],
      IMGUploadHeaders: {},
      IMGUploadData: {},
      TABActiveTab: "tab1",
    });
    const instance = getCurrentInstance();
    const submitForm = () => {
      instance.ctx.$refs["vForm"].validate((valid) => {
        if (!valid) return;
        //TODO: 提交表单
      });
    };
    const resetForm = () => {
      instance.ctx.$refs["vForm"].resetFields();
    };
    return {
      ...toRefs(state),
      submitForm,
      resetForm,
    };
  },
});
</script>

<style lang="scss">
.el-input-number.full-width-input,
.el-cascader.full-width-input {
  width: 100% !important;
}

.el-form-item--medium {
  .el-radio {
    line-height: 36px !important;
  }

  .el-rate {
    margin-top: 8px;
  }
}

.el-form-item--small {
  .el-radio {
    line-height: 32px !important;
  }

  .el-rate {
    margin-top: 6px;
  }
}

.el-form-item--mini {
  .el-radio {
    line-height: 28px !important;
  }

  .el-rate {
    margin-top: 4px;
  }
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: "";
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}
</style>

<style lang="scss" scoped>
div.table-container {
  table.table-layout {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;

    td.table-cell {
      display: table-cell;
      height: 36px;
      border: 1px solid #e1e2e3;
    }
  }
}

div.tab-container {
}

.label-left-align :deep(.el-form-item__label) {
  text-align: left;
}

.label-center-align :deep(.el-form-item__label) {
  text-align: center;
}

.label-right-align :deep(.el-form-item__label) {
  text-align: right;
}

.custom-label {
}

.static-content-item {
  min-height: 20px;
  display: flex;
  align-items: center;

  :deep(.el-divider--horizontal) {
    margin: 0;
  }
}
</style>